7. Web

Scrapbox project for sharing information

Today's topics

Web and interaction design

Web and "Smooth" interface

Navigation techniques on the Web

We are living in the Web age!

Advantages of the Web

Ubiquitous

Read/write any information

Available everywhere

Information sharing everywhere

Information from all over the world

Single info source

Simple user testing

Installation not required

Advantages of the Web

Collective intelligence

Information sharing

Using various services

Easy visualization

Easy programming

Best for interaction design experiments

Before the Web age

Software distribution difficult

Installation difficult

Getting user feedbacks difficult

What we could not do on a browser

Direct manipulation I/F

Sending data from server

Large data streaming

Text editing

Drawing graphics

Handling audio

Handling 3D graphics

What we could not do on a browser

Direct manipulation I/F

Sending data from server

Large data streaming

Text editing

Drawing graphics

Handling audio

Handling 3D graphics

What we do not do on the Web

Large-scale software development

Desktop GUI

Web and the real world

People want to use the Web everywhere

Ubiquitous computing, IoT, AR, VR, ...

How can we integrate them?

Do you have your own domain?

Do you have your own Web server?

Why not?

Having your own domain makes sense

Having a Web server is recommended

What you can do with your own domain

You can create your own Web pages

You can have a nice email address

You can perform strange experiments

You can backup data on your server

Better than using cloud services

You can put any data

You don't have to rely on somebody else

Obstacles?

Running costs

Service fee

Electricity

Time-consuming

Managements

Registration

Setting up everything

Risks

Possible Attacks

How much should we spend?

For domain registration

￥1,000 / year

For servers

￥10,000 / year

Multiple domains on one server

Let's have your own domain/server!

Web service and Ubicom

Goals are similar

Everyone / everywhere / anytime

Integration expected

"Smooth" interaction

Direct

Reversible

Continuous

Intuitive

Direct Manipulation

Coind by Ben Shneiderman

Ben Shneiderman

Professor at University of Maryland

Famous researcher on user interface

http://gyazo.com/23a7bab8adfcf991a4df9bf69d0b1711.png

UI textbook by Shneiderman

Covering wide ranges

https://www.amazon.co.jp/dp/013438038X https://gyazo.com/b03ecbbb108b911464ed53d3fda78396.png

Examples of direct manipulation

Slider

Scroll bar

Window dragging

Dinamic query

Dynamic Query

Coined by Ben Shneiderman

Search results change as soon as search condition changes

e.g. "Incremental" search

Incremental search

Perform search as soon as some input

Go back to previous state when character deleted

https://www.jorudan.co.jp/ https://gyazo.com/f2f45cf575e56cbd2c646edeba728430

Non-direct manipulation interface

Window open/close

Window disappear suddenly

Clicking links on Web page

Suddenly jump to different page

Selecting command from menu

Cannot undo easily

Interface in the real world

Almost all interaction is smooth

Water faucet

Stairing wheel

Screw

...

Web access basics

http://gyazo.com/4fe5e73511ea1909e61e437e06a50056.png

Original Web browser

Page transition required

Server cannot start communication

Requests sent from browser

No 'chat' possible

Not flexible

'Not smooth' at all

Problems of page transition

Large transition time

Sudden change of display

Users are surprised

Basic browser operation

code:brouserloop.txt

while true do

1. User does something on browser

2. Send request to server

3. Receive response from server

4. Display HTML based on the response

end

Problems

Display updated only after server response

Nothing happens without user operation

Direct manipulation impossible

User interface on the (old) Web

Non-smooth interaction

Click-based page transition

Page transition after performing search

Page transition based on menus

Most frequently used button

Modern Web applications

"Rich" internet application (RIA)

Single-page application (SPA)

URL does not change

Everything implemented in JavaScript

DOM handling or drawing

Everything by JavaScript

Smooth interaction possible

HTML5 features

New semantic tags

RDFs, microformat

Local storage, File API

Device access

Geolocation API, microphone, camera,

Communication

WebSocket, Server-Sent Events

Audio/video

3D-CG, drawing

SVG, canvas, WebGL, CSS3 3D

CSS3

Native application and web application

Native application

Runs on PC desktop

Implemented in C, Java

Web applications

Runs on browser

Converting Web app to native app

RIA requirements

Always accept user inputs

Change display at any time

Background communication with server

Smooth interface

Smooth interface on a browser

Rewrite DOM dynamically

DOM: Document Object Model

Hierarchical HTML structure

Rewrite HTML by JavaScript

Draw everything using drawing libraries

Canvas

SVG

WebGL

Rewriting DOM (HTML)

Construct hierarchical structure

document.querySelector('#abc')

Use jQuery

Easier to handle DOM

Using virtual DOM

Use React.js, Vue.js, etc.

Write HTML in JS code

Using drawing libraries

Canvas

Used in P5.js

SVG

Used in D3.js

Ajax

Used in modern Web application like GoogleMaps

Asynchronous communication between browser and server

Asynchronous communication

Exchange data without waiting for something

Don't wait user operations

Don't wait server operations

Minimize users' waiting time

Synchronous communication

System and user send data alternatively

Unix command shell

Calculator

TV

Vending machine

...

Web access basics

http://gyazo.com/4fe5e73511ea1909e61e437e06a50056.png

Interface and parallelism

Various pararell processing required

System response and user operation

Voice input and keyboard

Error handling

Multiple users

Parallelism required for asynchronous communication

How Ajax works

Use asynchronous calling on JavaScript

XMLHttpRequest()

Finishes promptly after sending request to server

Callback function called when data is available

Use the data for drawing, etc.

Ajax examples

Google appls

GoogleMaps

GMail

Scrapbox

All other Web applications

Problems of Ajax

Asynchronous communication is difficult

Parallel processing is difficult

Exception handling is difficult

Many exceptions while communication

Server can't send data to browser

Can't create chat service

WebSocket

Communication between browser and server without HTTP

Flexible communication

Server can send data to browser

2011/12 RFC6455 proposed standard

Use Node.js

Navigation on the Web

Standard way of Web navigation

Actively view Web contents

Web contents are made by active people

Actively post information to SNS

Actively define links

Other possibilities

Passive navigation

Automatic navigation

Many types of navigation

"Flow" information and "stock" information

Navigation for information management

Bookmarking

Passive navigation

Difference between TV and net

We lean forward for using net

We lean backword for watching TV

Using Web

http://gyazo.com/bc341d03c27dc625aea7c943f06dc27c.png

Watching TV

http://gyazo.com/32087b1dce342dd540c7277b4b11a431.png

Activeness of computer users

CLI - very active

Everyone should be very active

Users should type many keys

GUI - partially passive

Users repeat selecting items from menus

Screensaver - passive

Users does nothing

Page revisit ratio

We don't visit new pages

Page revisit ratio = 66%

Automatic navigation maybe useful

Rotating suchi restaurant

http://gyazo.com/07f577c2336165513eba49d3c008e241.png

Information if automatically presented

Users just select items

Automatic navigation sysems

Viewing-based interface

GyaTV

Wikipedia Saver

Viewing-based interface

Keita Watanabe @ Meiji University

http://gyazo.com/0a5dacb8b06b58b804944a9c3e12cd03.png

Implementation of Viewing-based interface

Floating multiple "keywords"

Perform Google search when two keywords collide

Automatically show Web pages

View Web pages like using a TV

https://gyazo.com/1c22b7a4015f18d5ba0183416c366629

Display Wikipedia article at random

Interesting pages displayed automatically

Navigation based on association

Neighbor-based search

Location-based navigation

Wiki keyword navigation

KWIC

List files based on similarities

http://gyazo.com/49ff2980552894951bb1a1e0e12368a7.png

Similarity examples

http://gyazo.com/9ff211e2c2f30b87fe047ecff7bd0f49.png

Photo navigation

Use date, tags, location data to mange photo data

Related photos can be found

https://gyazo.com/3c82985ce4904c39fde8de20f477921c

Photo management on Scrapbox

Use Scrapbox for managing photos

KWIC Navigator

Navigate information space by

Follow related keywords for navigation

http://gyazo.com/8f3fb87bc285391340f8cbef97e04eea.png

Wiki keyword navigation

https://gyazo.com/60d2cf8a3068f9e092b76c17e86af0a0

Scrapbox

Use links for connecting pages (Wiki)

Bi-directional links

2-hop links displayed

Contents publish/subscribe using Scrapbox data

https://gyazo.com/caef339fd0be8e088e21ef9c411fc852

書籍の連想検索

https://gyazo.com/5e8c8ba2e824732d0fd3a8552a8ef4bf

https://gyazo.com/ba81162f57180fb6530877c06417ffc0

Navigation for information management

Bookmarking

RTn

Reblog

Using bookmarks

Social bookmarks

Public bookmarks

Visit history

Social bookmark

Sharing Web bookmarks among users

Example: Hatena bookmark

Social bookmark usages

People tend to use it for bragging

Or use it for blaming others

Define short names for URLs

c.f. TinyURL

ショートカット的に利用